<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        * {
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        .container {
            width:100%;
        }
        h3 {
            text-align: center;
            padding:20px 0;
            font-size: 30px;
        }
        p{
            text-align: center;
            color:#999;
            padding:10px 0;
        }
        .row {
            width:400px;
            height:50px;
            margin:0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .row span {
            width:60px;
            font-size: 15px;
        }
        .row input {
            width:300px;
            height:40px;
            line-height: 40px;
            font-size: 15px;
            text-indent: 0.5em;
            outline: none;
        }
        .row #submit {
            width:200px;
            height:40px;
            line-height: 40px;
            margin:0 auto;
            color:white;
            background-color: orange;
            border:none;
            border-radius: 10px;
        }
        .row #submit:active {
            background-color: grey;
        }


    </style>



    <div class="container">
        <h3>表白墙</h3>
        <p>输入后点击提交，会将信息显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
         </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
         </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
    //   加入ajax的代码，此处要加入的逻辑有两个部分
    //   点击提交按钮的时候，ajax要能够构造数据发送给服务器
    //   页面加载的时候，从服务器获取消息列表，并在界面上直接显示 
        function getMessages(){
            $.ajax({
                type:'get',
                url:'message',
                success:function(body){
                  //当前的body已经是一个JS对象数组了，ajax会根据响应的content type来自动进行解析
                  //如果服务器返回的content type已经是application/json了，ajax就会把body自动转成JS的对象
                  //如果客户端没有自动转，也可以通过JSON.parse()来手动转换
                    let container=document.querySelector('.container');
                    for(let message of body){
                        let div=document.createElement('div');
                        div.innerHTML=message.from+'对'+message.to+'说：'+message.message;
                        div.className='row';
                        container.appendChild(div);

                    }

                }

            });
        }
        //函数调用
        getMessages();

    
        //当用户点击submit，就会获取到input中的内容，从而把内容构造成一个div，插入到页面的末尾
        let submitBtn=document.querySelector('#submit');
        submitBtn.onclick=function() {
            //1.先获取到3个input中的内容
            let inputs=document.querySelectorAll('input');
            let from=inputs[0].value;
            let to=inputs[1].value;
            let msg=inputs[2].value;
            if(from=='' || to=='' || msg==''){
                //用户还没填写完事，暂时先不提交数据
                return;
            }
            //2.生成新的div，内容就是input里的内容，把这个新的div加到页面中
            let div=document.createElement('div');
            div.innerHTML=from+'对'+to+'说：'+msg;
            div.className='row';
            let container=document.querySelector('.container');
            container.appendChild(div);
            //3.清空之前输入框的内容
            for(let i=0;i<inputs.length;i++){
                inputs[i].value='';
            }
            //4. 把把当前获取到的输入框的内容，构造成一个HTTP POST请求，通过ajax发给服务器
            let body={
                from:from,
                to:to,
                message:msg
            };
            $.ajax({
                type:"post",
                url:"message",
                contentType:"application/json;charset=utf8",
                data:JSON.stringify(body),
                success:function(body){
                    alert("消息提交成功");
                },
                error:function(){
                    alert("消息提交失败");
                }
            });



        }
    </script>
    
</body>
</html>